<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <style>
body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #0b0f00;
    position: relative;
}
.game-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}
#gameCanvas {
    border: 2px solid #333;
    background-color: #fff;
}
.game-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 150px;
}
.score-display {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #333;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 2px solid #D4AF37;
    text-align: center;
    border-radius: 5px;
}
#controlBtn {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #4CAF50;
    color: white;
}
#controlBtn.btn-start { background-color: #4CAF50; }
#controlBtn.btn-reset { background-color: #ff9800; }
#controlBtn.btn-tryagain { background-color: #f44336; }
#aiBtn {
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #2196F3;
    color: white;
    margin-top: 10px;
}
#aiBtn.active { background-color: #f44336; }

#back-home {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10;
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s;
}
#back-home:hover {
    background: rgba(0, 0, 0, 0.9);
}

/* 粒子效果容器样式 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
}
    </style>
</head>
<body>

    <a id="back-home" href="/">返回首页</a>
    <div class="game-container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
        <div class="game-info">
            <div class="score-display">得分: <span id="score">0</span></div>
            <button id="controlBtn" class="btn-start">Start</button>
        </div>
    </div>
    <script>
// ================== 贪吃蛇核心 ===================
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
const controlBtn = document.getElementById('controlBtn');
const scoreElement = document.getElementById('score');
let gameState = 'initial';
let snake = [ { x: 10, y: 10 } ];
let dx = 1;
let dy = 0;
let food = { x: 15, y: 15 };
let score = 0;
let gameLoop;
function updateControlButton() {
    controlBtn.textContent = gameState === 'initial' ? 'start' : 
                           gameState === 'running' ? 'reset' : 'try again';
    controlBtn.className = gameState === 'initial' ? 'btn-start' : 
                          gameState === 'running' ? 'btn-reset' : 'btn-tryagain';
}
function startGame() {
    gameState = 'running';
    updateControlButton();
    gameLoop = setInterval(update, 100);
}
function resetGame() {
    snake = [{ x: 10, y: 10 }];
    dx = 1; dy = 0; score = 0;
    generateFood();
    if (gameLoop) clearInterval(gameLoop);
    gameState = 'initial';
    updateControlButton();
    scoreElement.textContent = score;
}
function initGame() {
    document.addEventListener('keydown', (e) => {
        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'w', 'a', 's', 'd', 'W', 'A', 'S', 'D'].includes(e.key)) {
            changeDirection(e);
        }
    });
    controlBtn.addEventListener('click', () => {
        if (gameState === 'initial') {
            startGame();
        } else if (gameState === 'running') {
            resetGame();
        } else if (gameState === 'gameOver') {
            resetGame();
        }
    });
    updateControlButton();
    scoreElement.textContent = score;
}
function update() {
    ctx.fillStyle = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    const head = { x: snake[0].x + dx, y: snake[0].y + dy };
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        score += 10;
        generateFood();
    } else {
        snake.pop();
    }
    if (checkCollision()) {
        gameOver();
        return;
    }
    scoreElement.textContent = score;
    drawSnake();
    drawFood();
}
function drawSnake() {
    snake.forEach((segment, index) => {
        ctx.fillStyle = index === 0 ? '#00ff00' : '#00cc00';
        ctx.fillRect(
            segment.x * gridSize,
            segment.y * gridSize,
            gridSize - 1,
            gridSize - 1
        );
    });
}
function drawFood() {
    ctx.fillStyle = '#ff0000';
    ctx.fillRect(
        food.x * gridSize,
        food.y * gridSize,
        gridSize - 1,
        gridSize - 1
    );
}
function gameOver() {
    clearInterval(gameLoop);
    gameState = 'gameOver';
    updateControlButton();
    ctx.fillStyle = '#ff0000';
    ctx.font = '24px Arial';
    ctx.textAlign = 'center';
    ctx.fillText('游戏结束!', canvas.width / 2, canvas.height / 2);
    ctx.textAlign = 'start';
}
function generateFood() {
    food.x = Math.floor(Math.random() * tileCount);
    food.y = Math.floor(Math.random() * tileCount);
    const onSnake = snake.some(segment => segment.x === food.x && segment.y === food.y);
    if (onSnake) {
        generateFood();
    }
}
function changeDirection(event) {
    const key = event.key.toLowerCase();
    const goingUp = dy === -1;
    const goingDown = dy === 1;
    const goingRight = dx === 1;
    const goingLeft = dx === -1;
    if (key === 'arrowleft' && !goingRight) {
        dx = -1; dy = 0;
    } else if (key === 'arrowup' && !goingDown) {
        dx = 0; dy = -1;
    } else if (key === 'arrowright' && !goingLeft) {
        dx = 1; dy = 0;
    } else if (key === 'arrowdown' && !goingUp) {
        dx = 0; dy = 1;
    } else if (key === 'a' && !goingRight) {
        dx = -1; dy = 0;
    } else if (key === 'w' && !goingDown) {
        dx = 0; dy = -1;
    } else if (key === 'd' && !goingLeft) {
        dx = 1; dy = 0;
    } else if (key === 's' && !goingUp) {
        dx = 0; dy = 1;
    }
}
function checkCollision() {
    const head = snake[0];
    if (
        head.x < 0 ||
        head.x >= tileCount ||
        head.y < 0 ||
        head.y >= tileCount
    ) {
        return true;
    }
    for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
            return true;
        }
    }
    return false;
}
initGame();
    </script>
    
    <!-- 粒子效果 -->
    <div id="particles-js"></div>
    <script>
      particlesJS('particles-js', {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#D4AF37"
          },
          "shape": {
            "type": "circle"
          },
          "opacity": {
            "value": 0.5,
            "random": true
          },
          "size": {
            "value": 3,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#D4AF37",
            "opacity": 0.2,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 1,
            "direction": "none",
            "random": true,
            "straight": false,
            "out_mode": "out",
            "bounce": false
          }
        },
        "interactivity": {
          "detect_on": "canvas",
          "events": {
            "onhover": {
              "enable": true,
              "mode": "grab"
            },
            "onclick": {
              "enable": true,
              "mode": "push"
            },
            "resize": true
          },
          "modes": {
            "grab": {
              "distance": 140,
              "line_linked": {
                "opacity": 0.5
              }
            },
            "push": {
              "particles_nb": 4
            }
          }
        },
        "retina_detect": true
      });
    </script>
</body>
</html>